前面我提到了一个开发中常见需求:能够复用之前项目中的配置、已存在的组件、工具方法等等。Nuxt3 提供的 layers 特性能使我们非常容易地创建和维护这样的项目基础结构。
本节将会包括如下内容:
- layers 的使用场景;
- layers 使用方法 ;
- layers 常见用例;
- 如何定制一个 layers。
# Layers 使用场景
以下情况下比较适合使用 layers:
- 共享可重用配置项;
- 使用 components 目录共享组件库;
- 使用 composables 和 utils 目录共享工具函数;
- 创建 Nuxt 主题;
- 创建模块预设;
- 共享标准初始化步骤。
# Layers 使用方法
我们可以在 nuxt.config.ts 中配置 extends 选项从而继承一个 layers 配置。
有三种配置 layers 方式:
- 相对地址:从本地继承;
- Npm 包名:从 npm 安装;
- Github URL:从 Github 下载。
就像下面这样配置,nuxt.config.ts:
dart
复制代码export default defineNuxtConfig({
extends: [
'../base', // 从本地继承
'@my-themes/awesome', // 从 npm 安装
'github:my-themes/awesome#v1', // 从 github 下载
]
})
@前端进阶之旅: 代码已经复制到剪贴板
# 范例:使用 docus 建设文档网站
社区有个用于文档建设的项目叫 docus,提供了 50 多个组件和设计系统便于创建文档类页面。docus 完全基于 layers 方式创建,因此可以快速在已存在的 Nuxt 项目中引入。
首先安装 docus:
sql
复制代码yarn add @nuxt-themes/docus
@前端进阶之旅: 代码已经复制到剪贴板
接下来只需要在项目中添加 extends 选项,nuxt.config.ts:
css
复制代码defineNuxtConfig({
extends: '@nuxt-themes/docus'
})
@前端进阶之旅: 代码已经复制到剪贴板
这就好了!下面在 content 目录创建一个页面试试,content/index.md:
yaml
复制代码---
title: "Get Started"
description: "Let's learn how to use my amazing module."
aside: true
bottom: true
toc: true
---
# Get Started
Let's learn how to use my amazing module.
go to [install